<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/base.css">
    <style>
        #myCanvas {
            background-color: darkgray;

        }

        #my_img {
            width: 600px;
            height: 300px;
        }
    </style>

</head>

<body>

    <div id="app">
        <canvas id="myCanvas"></canvas>

        <button id="abc">获取图片</button>

        <img src="" id="my_img" alt="">

    </div>




    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->


    <script>
        function drawing(option) {

            option.paper_width = 220;
            option.paper_height = option.paper_width * 300 / 470;

            option.margin_left = option.margin_left || 5;
            option.margin_top = option.margin_top || 5;

            option.column_num || 10;
            option.row_num || 10;


            var c = document.getElementById("myCanvas");
            c.style.width = option.paper_width + 'px';
            c.style.height = option.paper_height + 'px';

            var ctx = c.getContext("2d");
            ctx.moveTo(0, 0);

            var startPoint = {
                x: 0,
                y: 0
            };

        }

        var urlMap = getUrlParamsMap();

        var w = urlMap['w'] || 220;
        var h = urlMap['h'] || 150;

        var e_w = urlMap['e_w'] || 200;
        var e_h = urlMap['e_h'] || 50;

        var c = document.getElementById("myCanvas");
        c.style.width = w + 'px';
        c.style.height = h + 'px';

        var ctx = c.getContext("2d");
        ctx.moveTo(0, 0);

        // ctx.fillStyle = "#555";
        // ctx.fillRect(0, 0, w, h);


        ctx.font = "12px Arial";
        ctx.moveTo(0, 0);

        var marginLeft = 5;
        var marginTop = 5;

        var startPoint = {
            x: 0,
            y: 0
        };

        ctx.moveTo(0, 0);
        ctx.lineTo(w, h);
        ctx.stroke();

        var column_num = 4;
        var row_num = 2;

        var arr = [];

        for (var i = 0; i < row_num; i++) {

            startPoint.y = startPoint.y + marginTop;
            startPoint.x = 0;
            console.log(startPoint, '=========11=========')

            for (var k = 0; k < column_num; k++) {
                startPoint.x = startPoint.x + marginLeft;
                console.log(startPoint, '=========22=========')
                ctx.moveTo(startPoint.x, startPoint.y);

                ctx.fillStyle = "#FFF";
                ctx.fillRect(startPoint.x, startPoint.y, e_w, e_h);

                // ctx.font = "15px Arial";
                // ctx.moveTo(startPoint.x, startPoint.y);
                // ctx.strokeText(i + k, startPoint.x, startPoint.y);

                startPoint.x = startPoint.x + e_w;
                console.log(startPoint, '=========33=========')
            }
            startPoint.y = startPoint.y + e_h;
            console.log(startPoint, '=========44=========')
        }


        document.getElementById("abc").onclick = function () {
            alert(0);
            var canvas = document.getElementById("myCanvas");
            var strDataUrl = canvas.toDataURL("image/jpeg", 1.0);
            document.getElementById('my_img').src = strDataUrl;
        }

        function getUrlParamsMap() {
            var url = location.search; //获取url中"?"符后的字串
            var map = {};
            if (url.indexOf("?") != -1) {
                var str = url.split('?')[1];
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    map[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return map;
        }
    </script>

</body>

</html>